
/* 头部区域 */
.css-head{
    height:50px;
    width:100%;
    background-color: #323330;
}
.css-header{
    padding:8px 20px;
    margin:0 60px 
}
.css-ease{
    float:left;
    font-size:18px;
    padding: 4px 10px;
}
.nav-information{
    float: right;
}
.personer{
    float: left;

}
.personer a{
    display: block;
    padding: 6px 20px;
}
/* 主体 */
.css-body{
    /* 栅格 */
    display: flex;
    /* 上到下垂直排列元素 */
    /* flex-direction: column; */
    /* body占比 */
    min-height: calc(100vh - 50px);
    height: 100%;
}
/* 左侧 */
.css-left{
    width:15%;
    background-color: rgb(33, 37, 43);
    color:#9DA5B4;
    font-size:16px;
}
/* 设置input大小样式 */
input{
    box-sizing: border-box;
    width: 60px;
    float: right;
    border: 0;
    border-radius: 5px;
    padding-left: 8px;
}
.input-setTow{
    float: none;
    padding-left: 5px;
    margin-left: 5px;
    margin-right: 19px;
    width: 37px;
}
.input-setSti{
    float: none;
    padding-left: 5px;
    margin-left: 5px;
    margin-right: 4px;
    width: 37px;
}


/* 栅元设置 */
.gridstylelite{ 
    /* display:none; */
} 
/* 元素定位 */
.gridstyle-attribute-box{
    display:none;
}

/* 以下是通用样式 */
/* 设置的div盒子的css样式 */
.left-box-style{
    /* 设置鼠标手势 */
    cursor:pointer;
    padding: 8px 16px;
    border: 1px solid rgb(232, 230, 227);
    border-left:0;
}
/* label的css样式 */
.left-label-style{
    font-size: 14px;
    display: block;
    padding:4px 0 5px 0;
}
/* 1.checkbox复选框的样式 */
.left-label-input{
    margin:0 12px 0 0;
}
/* 2.select样式 */
.left-label-select{
    appearance: none;
    margin: 0.25rem 0px 0px;
    padding: 0.2rem 1.5rem 0.2rem 0.5rem;
    border-radius: 3px;
    border: 0;
}






/* 右侧 */
.css-right{
    width:85%;
    background-color: rgb(232, 230, 227);
    display:grid;
    /* 设置栅格数为2*2的 */
    grid-template:repeat(2,50%)/repeat(2,50%);
}
.option-click{
    background-color: rgb(243, 243, 243);

}
.option-click{
    /* display:flex; */
    margin: 12px 12px 12px 14px;
    /* grid-template-rows: repeat(15,1fr); */
    /* grid-template-columns: repeat(35,1fr); */
    /* background-image: url(../img/Full-View.jpg); */
    /* background-repeat:no-repeat;  */


}
/* 手机端设置为： */
@media screen and (max-width: 767px) {
    .option-click {
        background-color: rgb(243, 243, 243);
        background-image: none;
    }
}
/* 观察区域 */
.option-header{
    height: 45px;
    
    background-image: url(../img/Full-View.jpg);
}
.observation-box{
    color:black;
    display: grid;
}
/* 创建的盒子展示给用户看 */
.lookBox{
    box-sizing:border-box;
    background-color: green;
    float: left;
    border:1px solid black;
}
.option-checkbox{
    /* 设置行开始线段 */
    grid-row: 1/3;
    /* 设置行结束线段 */
    grid-column: 2/3;
    margin: 12px 18px 12px 18px;
    background-color: rgb(232, 230, 227);
}
#textarea {
    background-color: rgb(243, 243, 243);
    /* 取消默认样式 */
    outline:none;
    /* 取消拖动放大 */
    resize:none;
    border: 0;
    font-size: 20px;
    color:green;
    padding:5px 0 0 6px;
}
.option-setbox {
    margin: 12px 12px 16px 12px;
    background-color: rgb(243, 243, 243);
    color:rgb(33, 37, 43);
}

.demo-ul {
    border-bottom: 3px solid rgb(222, 222, 222);
}
.demo-ul>li{
    float:left;
}
.demo-ul a {
    display:inline-block;
    padding: 6px 20px;
    color:rgb(33, 37, 43);
}
.demo-ul a:hover {
    background-color: rgb(50, 51, 48);
    color:rgb(243, 243, 243);
}